<template>
    <div class="viewBlog">
        <el-row justify="center">
            <el-col :lg="20" :xs="22" :sm="20" :md="20">
                <div class="top">
                    <div class="title">{{blog.blogTitle}}</div>
                    <div class="info">
                        <span>发布时间：{{blog.createTime}}</span>
                        <span style="margin-left:20px">浏览量：{{blog.viewCount}}</span>
                        <span style="margin-left:20px">作者：{{blog.author}}</span>
                    </div>
                </div>
                <md-editor :previewOnly="true" class="mde" v-model="blog.blogInfo.content"></md-editor>
            </el-col>
        </el-row>
        
    </div>
</template>
<script>
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css';
import {blogDetail} from '../js/blog'
export default {
    name: 'ViewBlog',
    components:{
        MdEditor
    },
    props: ["id"],
    data(){
        return{
            blog:{
                blogInfo:{
                    content: ''
                }
            }
        }
    },
    methods:{
        getBlogDetail(){
            blogDetail({id:this.id}).then(res=>{
                console.log(res)
                this.blog = res.data
            })
        }
    },
    mounted(){
        
        this.getBlogDetail();
    }
}
</script>
<style scoped>
.viewBlog{
    overflow-y: auto;
}
.mde{
    padding: 20px;
}
.top{
    padding-top: 20px;
    text-align: center;
    border-bottom: 1px solid gainsboro;
}
.title{
    font-size: 24px;
    font-weight: bold;
}
.info{
    font-size: 14px;
    color: gray;
}
</style>